index.html.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  1. <template>
  2. <div>
  3. <HomePageHead></HomePageHead>
  4. <HomePageNavigation></HomePageNavigation>
  5. <!-- <HomeSecondaryHeading :titleData="pageData" :pinyinid="routeId"></HomeSecondaryHeading> -->
  6. <!-- 频道页 -->
  7. <!-- 农副产品供销网-频道页 -->
  8. <main class="index_main" id="all_vue">
  9. <!-- 二级栏目 start -->
  10. <nav class="channel_nav clearfix" v-if="pageData">
  11. <a class="channel_nav_head_name" href="" title="">
  12. {{ title }}
  13. </a>
  14. <div class="channel_nav_a_box clearfix">
  15. <NuxtLink :href="getLinkPath(item)" class="channel_nav_a" :title="item.alias"
  16. v-for="(item, index) in pageData" :key="index">
  17. <span class="nav2_title">{{ item.alias }}</span>
  18. </NuxtLink>
  19. </div>
  20. </nav>
  21. <!-- 二级栏目 end -->
  22. <section class="channel_1 clearfix">
  23. <div class="channel_box_1 clearfix">
  24. <div class="channel_head_btn_box">
  25. <div class="channel_head_btn channel_head_btn_only">
  26. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[0])" v-if="pageData[0]"
  27. :title="pageData[0].alias">
  28. {{ pageData[0].alias }}
  29. </NuxtLink>
  30. </div>
  31. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[0])" v-if="pageData[0]"
  32. :title="pageData[0].alias">
  33. 栏目简介
  34. </NuxtLink>
  35. </div>
  36. <div class="channel_name_ul" v-if="pageData[0].data2">
  37. <div class="channel_name_ul_li" v-for="(item, index) in pageData[0].data2" :key="index">
  38. <NuxtLink class="channel_name_ul_li_dot1 dot1" :href="getLinkPathDetail(item)"
  39. :title="item.title" :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  40. {{ item.title }}
  41. </NuxtLink>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="channel_box_2 clearfix">
  46. <div class="channel_1_box clearfix">
  47. <HomeBigSwiper></HomeBigSwiper>
  48. </div>
  49. </div>
  50. </section>
  51. <!-- 广告1 -->
  52. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  53. <section class="channel_2 clearfix">
  54. <div class="channel_box_3 clearfix">
  55. <!--start 模块2-->
  56. <div class="channel_head_btn_box">
  57. <div class="channel_head_btn channel_head_btn_only">
  58. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[1])" v-if="pageData[1]"
  59. :title="pageData[1].alias">
  60. {{ pageData[1].alias }}
  61. </NuxtLink>
  62. </div>
  63. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[1])" v-if="pageData[1]"
  64. :title="pageData[1].alias">
  65. 栏目简介
  66. </NuxtLink>
  67. </div>
  68. <div class="channel_big_ul clearfix" >
  69. <div class="channel_big_li clearfix" v-if="pageData[1].data[0]">
  70. <div class="channel_big_li_img_box" v-if="pageData[1].data[0]">
  71. <NuxtLink :href="getLinkPathDetail(pageData[1].data[0])"
  72. :title="pageData[1].data[0].title">
  73. <img class="channel_big_li_img" :src="pageData[1].data[0].imgurl"
  74. :title="pageData[1].data[0].title" alt="">
  75. <span class="channel_big_li_content">{{ pageData[1].data[0].title }}</span>
  76. </NuxtLink>
  77. </div>
  78. <div class="channel_big_li_in" v-if="pageData[1].data2">
  79. <div class="channel_ul_1">
  80. <NuxtLink class="channel_ul_1_a dot1" v-for="(item, index) in pageData[1].data2"
  81. :href="getLinkPathDetail(item)" :title="item.title" :key="item.id"
  82. :target="item.islink == 1 ? '_blank' : '_self'">
  83. {{ item.title }}
  84. </NuxtLink>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="channel_big_li clearfix" v-if="pageData[1].data[1]">
  89. <div class="channel_big_li_img_box" v-if="pageData[1].data[1]">
  90. <NuxtLink :href="getLinkPathDetail(pageData[1].data[1])"
  91. :title="pageData[1].data[1].title">
  92. <img class="channel_big_li_img" :src="pageData[1].data[1].imgurl"
  93. :title="pageData[1].data[1].title" alt="">
  94. <span class="channel_big_li_content">{{ pageData[1].data[1].title }}</span>
  95. </NuxtLink>
  96. </div>
  97. <div class="channel_big_li_in" v-if="pageData[1].data3">
  98. <div class="channel_ul_1">
  99. <NuxtLink class="channel_ul_1_a dot1" v-for="(item, index) in pageData[1].data3"
  100. :href="getLinkPathDetail(item)" :title="item.title" :key="item.id"
  101. :target="item.islink == 1 ? '_blank' : '_self'">
  102. {{ item.title }}
  103. </NuxtLink>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <!--end 模块2 -->
  109. <!--start 模块3-->
  110. <div class="channel_head_btn_box channel_head_top">
  111. <div class="channel_head_btn channel_head_btn_only">
  112. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[2])" v-if="pageData[2]"
  113. :title="pageData[2].alias">
  114. {{ pageData[2].alias }}
  115. </NuxtLink>
  116. </div>
  117. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[2])" v-if="pageData[2]"
  118. :title="pageData[2].alias">
  119. 栏目简介
  120. </NuxtLink>
  121. </div>
  122. <div class=" clearfix">
  123. <div class="channel_box_5 clearfix">
  124. <div class="channel_img_ul_2">
  125. <div class="channel_img_ul_2_li" v-if="pageData[2].data[0]">
  126. <NuxtLink :href="getLinkPathDetail(pageData[2].data[0])"
  127. :title="pageData[2].data[0].title">
  128. <img class="channel_img_ul_2_li_img" :src="pageData[2].data[0].imgurl" title=""
  129. alt="">
  130. <div class="channel_img_ul_2_li_dot1 dot1">
  131. {{ pageData[2].data[0].title }}
  132. </div>
  133. </NuxtLink>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="channel_box_6 clearfix" v-if="pageData[2].data2"">
  138. <div class=" channel_ul_2 clearfix">
  139. <NuxtLink class="channel_ul_2_a dot1" v-for="(item, index) in pageData[2].data2"
  140. :href="getLinkPathDetail(item)" :title="item.title" :key="item.id"
  141. :target="item.islink == 1 ? '_blank' : '_self'">
  142. {{ item.title }}
  143. </NuxtLink>
  144. </div>
  145. </div>
  146. </div>
  147. <!--end 模块3 -->
  148. </div>
  149. <div class="channel_box_4 clearfix">
  150. <!--start 模块4 -->
  151. <div class="channel_head_btn_box">
  152. <div class="channel_head_btn channel_head_btn_only">
  153. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[3])" v-if="pageData[3]"
  154. :title="pageData[3].alias">
  155. {{ pageData[3].alias }}
  156. </NuxtLink>
  157. </div>
  158. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[3])" v-if="pageData[3]"
  159. :title="pageData[3].alias">
  160. 栏目简介
  161. </NuxtLink>
  162. </div>
  163. <div class="channel_img_ul_3" v-if="pageData[3].data">
  164. <div class="channel_img_ul_3_li clearfix_2" v-for="(item, index) in pageData[3].data" :key="item">
  165. <NuxtLink class="channel_img_ul_3_li_a" :href="getLinkPathDetail(item)" :title="item.title"
  166. :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  167. <div class="channel_img_ul_3_li_img_box">
  168. <img class="channel_img_ul_3_li_img" :src="item.imgurl" title="" alt="">
  169. </div>
  170. <div class="channel_img_ul_3_li_dot3 dot3">
  171. {{ item.title }}
  172. </div>
  173. <div class="channel_img_ul_3_li_num">{{ index + 1 }}</div>
  174. </NuxtLink>
  175. </div>
  176. </div>
  177. </div>
  178. <!--end 模块4 -->
  179. </section>
  180. <!-- 广告2 -->
  181. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  182. <section class="channel_3 clearfix">
  183. <div class="channel_box_3 clearfix"v-if="pageData[4]">
  184. <!--start 模块5 -->
  185. <div class="channel_head_btn_box">
  186. <div class="channel_head_btn channel_head_btn_only">
  187. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[4])" v-if="pageData[4]"
  188. :title="pageData[4].alias">
  189. {{ pageData[4].alias }}
  190. </NuxtLink>
  191. </div>
  192. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[4])" v-if="pageData[4]"
  193. :title="pageData[4].alias">
  194. 栏目简介
  195. </NuxtLink>
  196. </div>
  197. <div class="channel_img_ul_4 clearfix" v-if="pageData[4].data">
  198. <div class="channel_img_ul_4_li clearfix" v-for="(item, index) in pageData[4].data" :key="index">
  199. <NuxtLink class="channel_img_ul_4_li_a clearfix" :href="getLinkPathDetail(item)" :title="item.title"
  200. :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  201. <div class="channel_img_ul_4_li_img_box">
  202. <img class="channel_img_ul_4_li_img" :src="item.imgurl" title="" alt="">
  203. </div>
  204. <div class="channel_img_ul_4_li_dot2 dot2">{{ item.title }}</div>
  205. </NuxtLink>
  206. </div>
  207. </div>
  208. <div class="channel_ul_3 clearfix" v-if="pageData[4].data2">
  209. <div class="channel_ul_3_li clearfix" v-for="(item, index) in pageData[4].data2" :key="index">
  210. <NuxtLink class="channel_ul_3_li_a" :href="getLinkPathDetail(item)" :title="item.title"
  211. :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  212. <div class="channel_ul_3_li_tag">{{ pageData[4].alias }}</div>
  213. <div class="channel_ul_3_li_dot1 dot1"> {{ item.title }}</div>
  214. </NuxtLink>
  215. </div>
  216. </div>
  217. <!--end 模块5 -->
  218. </div>
  219. <div class="channel_box_4 clearfix" v-if="pageData[5]">
  220. <!--start 模块6-->
  221. <div class="channel_head_btn_box">
  222. <div class="channel_head_btn channel_head_btn_only">
  223. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[5])" v-if="pageData[5]"
  224. :title="pageData[5].alias">
  225. {{ pageData[5].alias }}
  226. </NuxtLink>
  227. </div>
  228. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[5])" v-if="pageData[5]"
  229. :title="pageData[5].alias">
  230. 栏目简介
  231. </NuxtLink>
  232. </div>
  233. <div class="channel_img_ul_5">
  234. <div class="channel_img_ul_5_li" v-if="pageData[5].data[0]">
  235. <NuxtLink class="channel_img_ul_5_li_a" :href="getLinkPathDetail(pageData[5].data[0])"
  236. :title="pageData[5].data[0].title"
  237. :target="pageData[5].data[0].islink == 1 ? '_blank' : '_self'">
  238. <img class="channel_img_ul_5_li_img" :src="pageData[5].data[0].imgurl" title="" alt="">
  239. <div class="channel_img_ul_5_li_dot2 dot2"> {{ pageData[5].data[0].title }}</div>
  240. </NuxtLink>
  241. </div>
  242. </div>
  243. <!--end 模块6-->
  244. </div>
  245. </section>
  246. <section class="channel_4 clearfix">
  247. <div class="channel_box_3 clearfix" v-if="pageData[6]">
  248. <div class="channel_head_btn_box">
  249. <div class="channel_head_btn">
  250. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[6])" v-if="pageData[6]"
  251. :title="pageData[6].alias">
  252. {{ pageData[6].alias }}
  253. </NuxtLink>
  254. </div>
  255. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[6])" v-if="pageData[6]"
  256. :title="pageData[6].alias">
  257. 栏目简介
  258. </NuxtLink>
  259. </div>
  260. <div class=" clearfix">
  261. <!--start 模块7-->
  262. <div class=" clearfix">
  263. <div class="channel_box_5 clearfix">
  264. <div class="channel_img_ul_6" v-if="pageData[6].data[0]">
  265. <div class="channel_img_ul_6_li">
  266. <NuxtLink class="channel_img_ul_6_li_a" :href="getLinkPathDetail(pageData[6].data[0])"
  267. :title="pageData[6].data[0].title"
  268. :target="pageData[6].data[0].islink == 1 ? '_blank' : '_self'">
  269. <img class="channel_img_ul_6_li_img" :src="pageData[6].data[0].imgurl" title=""
  270. alt="">
  271. <div class="channel_img_ul_6_li_dot2 dot2">
  272. {{ pageData[6].data[0].title }}
  273. </div>
  274. </NuxtLink>
  275. </div>
  276. </div>
  277. <div class="channel_img_ul_even_1 clearfix" v-if="pageData[6].data2">
  278. <div class="channel_img_ul_even_1_li" v-for="(item, index) in pageData[6].data2"
  279. :key="index">
  280. <NuxtLink class="channel_img_ul_even_1_li_a" :href="getLinkPathDetail(item)"
  281. :title="item.title" :key="item.id" :target="item.islink == 1 ? '_blank' : '_self'">
  282. <img class="channel_img_ul_even_1_li_img" :src="item.imgurl" title="" alt="">
  283. <div class="channel_img_ul_even_1_li_dot2 dot2">
  284. {{ item.title }}
  285. </div>
  286. </NuxtLink>
  287. </div>
  288. </div>
  289. </div>
  290. <div class="channel_box_6 clearfix">
  291. <div class="channel_ul_4 clearfix" v-if="pageData[6].data3">
  292. <NuxtLink class="channel_ul_4_a dot1" :href="getLinkPathDetail(item)"
  293. v-for="(item, index) in pageData[6].data3" :key="index"
  294. :target="item.islink == 1 ? '_blank' : '_self'">
  295. {{ item.title }}
  296. </NuxtLink>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. <div class="channel_box_4 clearfix" v-if="pageData[7]">
  303. <div class="channel_head_btn_box">
  304. <div class="channel_head_btn">
  305. <NuxtLink class="channel_head_a" :href="getLinkPath(pageData[7])" v-if="pageData[7]"
  306. :title="pageData[7].alias">
  307. {{ pageData[7].alias }}
  308. </NuxtLink>
  309. </div>
  310. <NuxtLink class="channel_head_btn_right_a" :href="getLinkPath(pageData[7])" v-if="pageData[7]"
  311. :title="pageData[7].alias">
  312. 栏目简介
  313. </NuxtLink>
  314. </div>
  315. <div class=" clearfix">
  316. <!--start 模块8 -->
  317. <div class=" clearfix" v-show="channel_choice_2_num == 1">
  318. <div class="channel_img_ul_7 clearfix">
  319. <div class="channel_img_ul_7_li" v-if="pageData[7].data[0]">
  320. <NuxtLink class="channel_img_ul_7_li_a" :href="getLinkPathDetail(pageData[7].data[0])"
  321. :title="pageData[7].data[0].title"
  322. :target="pageData[7].data[0].islink == 1 ? '_blank' : '_self'">
  323. <img class="channel_img_ul_7_li_img" :src="pageData[7].data[0].imgurl" title="" alt="">
  324. <div class="channel_img_ul_7_li_foot">
  325. <div class="channel_img_ul_7_li_tag">热 门</div>
  326. <div class="channel_img_ul_7_li_dot1 dot1">{{ pageData[7].data[0].title }}
  327. </div>
  328. </div>
  329. </NuxtLink>
  330. </div>
  331. </div>
  332. <div class="channel_ul_5 clearfix" v-if="pageData[7].data2">
  333. <NuxtLink class="channel_ul_5_a dot1" :href="getLinkPathDetail(item)"
  334. v-for="(item, index) in pageData[7].data2" :key="index"
  335. :target="item.islink == 1 ? '_blank' : '_self'">
  336. {{ item.title }}
  337. </NuxtLink>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. </section>
  343. </main>
  344. <!-- 页脚部分 -->
  345. <HomeFoot1></HomeFoot1>
  346. </div>
  347. </template>
  348. <script setup>
  349. //0.加载页面依赖 start ---------------------------------------->
  350. import { ref, onMounted } from 'vue';
  351. import { ElMessage } from 'element-plus';
  352. const channel_choice_1_num = ref(1)
  353. const channel_choice_2_num = ref(1)
  354. //0.加载页面依赖 end ---------------------------------------->
  355. //1.获得路由id start ---------------------------------------->
  356. const targetSegment = getRoutePath(1);
  357. //1.1 获得当前的路由id
  358. let routeId;
  359. //通过导航路径反向查询导航id
  360. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  361. method: 'GET',
  362. query: {
  363. 'pinyin': targetSegment,
  364. },
  365. });
  366. if (getRouteId.code == 200) {
  367. routeId = getRouteId.data.category_id
  368. } else {
  369. console.log("获得路由id出错!", getRouteId.message)
  370. }
  371. //1.获得路由id end ---------------------------------------->
  372. //2.页面交互效果 start ---------------------------------------->
  373. // 2.1 一级栏目
  374. const title = ref("")
  375. const tabsData = ref(1)
  376. async function getPageDataTitle() {
  377. const mkdata = await requestDataPromise('/web/getOneWebsiteCategory', {
  378. method: 'GET',
  379. query: {
  380. 'catid': routeId,
  381. },
  382. });
  383. if (mkdata.code == 200) {
  384. title.value = mkdata.data.alias;
  385. } else {
  386. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  387. console.log("错误位置:获取二级标题")
  388. console.log("后端错误反馈:", mkdata.message)
  389. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  390. }
  391. }
  392. getPageDataTitle();
  393. //2.页面交互效果 end ---------------------------------------->
  394. //3.广告 start ---------------------------------------->
  395. let adImg1 = ref({})
  396. let adImg2 = ref({})
  397. let adImg3 = ref({})
  398. let adImg4 = ref({})
  399. onMounted(async () => {
  400. //从客户端获取行政职能部门 加快打开速度
  401. const { $webUrl, $CwebUrl } = useNuxtApp();
  402. //广告1
  403. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nfcpgxw_category_0001`
  404. const responseAd1 = await fetch(url, {
  405. headers: {
  406. 'Content-Type': 'application/json',
  407. 'Userurl': $CwebUrl,
  408. 'Origin': $CwebUrl
  409. }
  410. });
  411. const resultAd1 = await responseAd1.json();
  412. adImg1.value = resultAd1.data[0];
  413. //广告2
  414. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nfcpgxw_category_0002`
  415. const responseAd2 = await fetch(url2, {
  416. headers: {
  417. 'Content-Type': 'application/json',
  418. 'Userurl': $CwebUrl,
  419. 'Origin': $CwebUrl
  420. }
  421. });
  422. const resultAd2 = await responseAd2.json();
  423. adImg2.value = resultAd2.data[0];
  424. //广告3
  425. let url3 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nfcpgxw_category_0003`
  426. const responseAd3 = await fetch(url3, {
  427. headers: {
  428. 'Content-Type': 'application/json',
  429. 'Userurl': $CwebUrl,
  430. 'Origin': $CwebUrl
  431. }
  432. });
  433. const resultAd3 = await responseAd3.json();
  434. adImg3.value = resultAd3.data[0];
  435. //广告4
  436. let url4 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nfcpgxw_category_0004`
  437. const responseAd4 = await fetch(url4, {
  438. headers: {
  439. 'Content-Type': 'application/json',
  440. 'Userurl': $CwebUrl,
  441. 'Origin': $CwebUrl
  442. }
  443. });
  444. const resultAd4 = await responseAd4.json();
  445. adImg4.value = resultAd4.data[0];
  446. })
  447. //3.广告 end ---------------------------------------->
  448. //4.页面数据 start ---------------------------------------->
  449. const pageData = ref([
  450. //示例:
  451. // {
  452. // id: 1,
  453. // title: "", //该导航的标题
  454. // data: [], //数据1
  455. // data1: [], //数据2
  456. // data2: [], //数据3
  457. // data3: [], //数据4
  458. // data4: [], //数据5
  459. // category_id1: "", //子导航id1
  460. // category_id2: "",
  461. // category_id3: "",
  462. // category_id4: "",
  463. // title1: "", //子导航标题1
  464. // title2: "",
  465. // title3: "",
  466. // title4: "",
  467. // cid: "" //该导航的id
  468. // },
  469. ])
  470. //4.1 获取所有导航
  471. try {
  472. const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
  473. method: 'GET',
  474. query: {
  475. 'placeid': 1,
  476. 'pid': routeId,
  477. 'num': 8
  478. },
  479. });
  480. if (navigateData.code == 200) {
  481. // 遍历可用的导航池放到页面中
  482. for (let index in navigateData.data) {
  483. let data = {
  484. title: navigateData.data[index].name,
  485. cid: navigateData.data[index].category_id,
  486. children_count: navigateData.data[index].children_count,
  487. alias: navigateData.data[index].alias,
  488. aLIas_pinyin: targetSegment + "/" + navigateData.data[index].aLIas_pinyin,
  489. data: [],
  490. data1: [],
  491. data2: [],
  492. data3: [],
  493. data4: [],
  494. category_id1: "",
  495. category_id2: "",
  496. category_id3: "",
  497. category_id4: "",
  498. title1: "",
  499. title2: "",
  500. title3: "",
  501. title4: ""
  502. };
  503. if (navigateData.data[index].is_url == 1) {
  504. // 处理 URL 的逻辑
  505. } else {
  506. //每个页面最多8个模块
  507. pageData.value.push(data);
  508. }
  509. }
  510. //导航池加载完毕,开始申请模块数据
  511. let getJson = [
  512. // { "parent": routeId + ",0,0", "child": pageData.value[0].cid + ",4,8" },//模块1
  513. // { "parent": routeId + ",0,0", "child": pageData.value[1].cid + ",2,8" },//模块2
  514. // { "parent": routeId + ",0,0", "child": pageData.value[2].cid + ",1,6" },//模块3
  515. // { "parent": routeId + ",0,0", "child": pageData.value[3].cid + ",6,0" },//模块4
  516. // { "parent": routeId + ",0,0", "child": pageData.value[4].cid + ",2,3" },//模块5
  517. // { "parent": routeId + ",0,0", "child": pageData.value[5].cid + ",1,0" },//模块6
  518. // { "parent": routeId + ",0,0", "child": pageData.value[6].cid + ",3,10" },//模块7
  519. // { "parent": routeId + ",0,0", "child": pageData.value[7].cid + ",1,6" },//模块8
  520. ]
  521. for (let i = 0; i < pageData.value.length; i++) {
  522. if (i == 0) {
  523. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",4,8" });
  524. } else if (i == 1) {
  525. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",2,8" });
  526. } else if (i == 2) {
  527. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",1,6" });
  528. } else if (i == 3) {
  529. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",6,0" });
  530. } else if (i == 4) {
  531. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",2,3" });
  532. } else if (i == 5) {
  533. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",1,0" });
  534. } else if (i == 6) {
  535. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",3,10" });
  536. } else if (i == 7) {
  537. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",1,6" });
  538. }
  539. }
  540. let jsonString = JSON.stringify(getJson);
  541. getPageAllData(jsonString);
  542. } else {
  543. console.log("错误:渲染8个模块环节出错,请检查是否存在没有数据的模块!")
  544. }
  545. } catch (error) {
  546. console.log("错误:导航池渲染执行接口出错!请检查频道页渲染的模块数据是否完整!")
  547. }
  548. async function getPageAllData(jsonString) {
  549. const mkdata = await requestDataPromise('/web/getWebsiteAllArticle', {
  550. method: 'GET',
  551. query: {
  552. 'id': jsonString
  553. },
  554. });
  555. console.log("频道页渲染的模块数据:", mkdata);
  556. if (mkdata.code == 200) {
  557. //模块1 顶部大图和列表
  558. pageData.value[0].data = mkdata.data[0].child.imgnum;
  559. pageData.value[0].data2 = mkdata.data[0].child.textnum;
  560. //模块2
  561. pageData.value[1].data = mkdata.data[1].child.imgnum;
  562. for (let index in mkdata.data[1].child.textnum) {
  563. if (index < 4) {
  564. pageData.value[1].data2.push(mkdata.data[1].child.textnum[index]);
  565. } else {
  566. pageData.value[1].data3.push(mkdata.data[1].child.textnum[index]);
  567. }
  568. }
  569. //模块3
  570. pageData.value[2].data = mkdata.data[2].child.imgnum;
  571. pageData.value[2].data2 = mkdata.data[2].child.textnum;
  572. //模块4
  573. pageData.value[3].data = mkdata.data[3].child.imgnum;
  574. //模块5
  575. pageData.value[4].data = mkdata.data[4].child.imgnum;
  576. pageData.value[4].data2 = mkdata.data[4].child.textnum;
  577. //模块6
  578. pageData.value[5].data = mkdata.data[5].child.imgnum;
  579. //模块7
  580. for (let index in mkdata.data[6].child.imgnum) {
  581. if (index < 1) {
  582. pageData.value[6].data.push(mkdata.data[6].child.imgnum[index]);
  583. } else {
  584. pageData.value[6].data2.push(mkdata.data[6].child.imgnum[index]);
  585. }
  586. }
  587. pageData.value[6].data3 = mkdata.data[6].child.textnum;
  588. //模块8
  589. pageData.value[7].data = mkdata.data[7].child.imgnum;
  590. pageData.value[7].data2 = mkdata.data[7].child.textnum;
  591. } else {
  592. ElMessage.error(mkdata.message)
  593. }
  594. }
  595. //4.页面数据 end ---------------------------------------->
  596. //5.设置seo信息 start---------------------------------------->
  597. const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
  598. method: 'GET',
  599. query: {
  600. 'catid': routeId
  601. },
  602. });
  603. if (setData.code == 200) {
  604. let seoTitle = setData.data.seo_title;
  605. let seoDescription = setData.data.seo_description;
  606. let seoKeywords = setData.data.seo_keywords;
  607. let seoSuffix = setData.data.suffix;
  608. let seoName = setData.data.website_name;
  609. useSeoMeta({
  610. title: seoTitle + "_" + seoSuffix,
  611. meta: [
  612. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  613. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
  614. ]
  615. });
  616. } else {
  617. console.log("设置频道页SEO出错!", setData.message)
  618. }
  619. //5.设置seo信息 end---------------------------------------->
  620. </script>
  621. <style lang="less" scoped>
  622. @import '@/assets/css/class.less';
  623. </style>